<template>
  <div class="limiter">
    <div
      class="container-login100"
      style="background-image: url('/assets/images/img-01.jpg');"
    >
      <div class="wrap-login100 p-t-190 p-b-30">
        <van-form
          @submit="login"
          class="login100-form validate-form"
        >
          <div class="login100-form-avatar">
            <img
              src="/assets/images/avatar-01.jpg"
              alt="AVATAR"
            />
          </div>

          <span class="login100-form-title p-t-20 p-b-45"></span>

          <div
            class="wrap-input100 validate-input m-b-10"
            data-validate="请输入注册邮箱"
          >
            <van-field
              v-model="form.email"
              name="email"
              left-icon="envelop-o"
              placeholder="请输入注册邮箱"
              :rules="rules.email"
            />
          </div>

          <div
            class="wrap-input100 validate-input m-b-10"
            data-validate="请输入密码"
          >
            <van-field
              v-model="form.password"
              type="password"
              name="password"
              left-icon="bag-o"
              placeholder="请输入密码"
              :rules="rules.password"
            />
          </div>

          <div class="container-login100-form-btn p-t-10">
            <van-button
              round
              block
              type="primary"
              native-type="submit"
            >登陆</van-button>
          </div>

          <div
            class="text-center w-full"
            style="margin: 15px 0;"
          >
            <router-link to="/user/base/register">
              <van-button
                round
                block
                type="success"
              >立即注册</van-button>
            </router-link>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BaseLogin',
  emits: ['toggle'],
  // 传值给到父组件
  created () {
    this.$emit('toggle', false)
  },
  data () {
    return {
      form: {
        email: null,
        password: null
      },
      rules: {
        email: [
          { required: true, message: '请输入注册邮箱' },
          {
            message: '请输入正确邮箱地址',
            validator (value) {
              //正则表达式
              var reg = new RegExp(
                "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
              )

              return reg.test(value)
            }
          },
        ],
        password: [
          { required: true, message: '请输入密码' }
        ]
      }
    }
  },
  methods: {
    async login () {
      var result = await this.$api.login(this.form)
      if (result.code == '1') {
        // 存cookies，用户信息
        this.$cookies.set('LoginUser', result.data)
        this.$notify({
          type: 'success',
          message: result.msg,
          duration: 1000,
          onClose: () => {
            this.$router.push(result.url)
          }
        })
      } else {
        this.$notify({
          type: 'danger',
          message: result.msg,
          duration: 1000
        })
      }
    }
  }
}
</script>
<style>
@import url("/public/assets/css/util.css");
@import url("/public/assets/css/main.css");
</style>
